import React, { useState } from 'react'
import { Tabs } from 'antd'
import { SettingOutlined } from '@ant-design/icons'

import { CpuTabPane } from '@/components'
import { ipc } from '@/ipcRenderer'
import { useDispatch, useSelector } from 'react-redux'
import { updateStatus } from '@/redux/devices.store'

export default function Home() {
  const dispatch = useDispatch()

  ipc.on('status', (event, state) => {

    dispatch(updateStatus(state))
    // console.log('message---->', event, state)
  })

  const genExtra = () => (
    <SettingOutlined
      onClick={(event) => {
        event.stopPropagation()
      }}
    />
  )

  const { computers, RS422 } = useSelector((state: any) => state.devices)


  const outerItems = computers.map((comp) => ({
    key: comp.id,
    label: comp.name,
    children: (
      <Tabs
        defaultActiveKey="RISCV"
        type="card"
        centered
        items={comp.cpuList.map((cpu) => ({
          key: `${cpu.name}-${comp.id}`,
          label: `${cpu.name}-${cpu.id}`,
          children: (
            <CpuTabPane
              GPIO={cpu.interfaces.GPIO}
              RS422={RS422}
              computerId={comp.id}
              cpuName={cpu.name}
              cpuId={cpu.id}
              link={cpu.link}
            />
          )
        }))}
      />
    )
  }))

  return <Tabs defaultActiveKey="0" className="p-2" type="card" items={outerItems} />
}
